<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性举例</title>
</head>
<body>

<div id="app">

    <div>
        firstName : <input type="text" v-model="firstName">
    </div>

    <div>
        firstName : <input type="text" v-model="lastName">
    </div>
<!--    {{firstName}}.{{lastName}}-->

     {{fullName}}--{{counter1}}
</div>

</body>
<script src="../../../demo/lib/vue.global.js"></script>
<script>
    var app= Vue.createApp({

        data:function (){

          return {
               firstName:'Green',
               lastName:'Black',
               counter1:0
          }

        },computed:{
            fullName:function (){
                  this.counter1++;
                 return this.firstName +'.'+ this.lastName;
            }
        }

     });

    app.mount('#app')

</script>
</html>